<template>
  <DefaultLayout>
    <div class="w-62% m-auto">
      <div class="h-1"></div>
      <div class="m-auto mt-12 w-60%">
        <n-input-group>
          <n-input
            round
            size="large"
            v-model:value="searchText"
            placeholder="搜索职位、企业"
          ></n-input>
          <n-button type="primary" size="large" round @click="search">搜索</n-button>
        </n-input-group>
      </div>
      <!-- 搜索结果 -->
      <div class="mt-36">
        <div class="flex mb-10">
          <span class="m-auto text-32 font-600" style="color: #222">搜索结果</span>
        </div>

        <n-card
          :bordered="false"
          style="border-radius: 10px"
          class="mt-12 h-300"
          v-show="searchJobs.length === 0 && searchCompanies.length === 0"
        >
          <n-flex align="center" justify="center" class="h-100%">
            <n-empty size="huge" description="没有搜索到任何结果">
            </n-empty>
          </n-flex>
        </n-card>
        <n-card
          v-for="item in searchCompanies"
          :bordered="false"
          style="border-radius: 10px"
          class="mt-12"
        >
          <div class="flex">
            <n-flex align="center">
              <n-avatar :src="item.company_icon" :size="64" />
              <n-flex vertical :size="0">
                <n-text>
                  {{ item.company_name }}
                </n-text>
                <n-flex class="text-12">
                  <n-text style="color: #999">
                    {{ getIndustriesName(item.industry_code) }}
                  </n-text>
                  <n-text style="color: #999">
                    {{ getCompanySize(item.size) }}
                  </n-text>
                  <n-text style="color: #999">
                    {{ getCity(item.address_code) }}
                  </n-text>
                </n-flex>
                <n-flex class="mt-5">
                  <n-tag
                    v-for="t in item.company_tags"
                    size="small"
                    :bordered="false"
                    :color="{ color: '#f8f8f8', textColor: '#8d92a1', borderColor: '#fff' }"
                  >
                    {{ t }}
                  </n-tag>
                </n-flex>
              </n-flex>
            </n-flex>
            <n-flex class="ml-auto" align="center">
              <n-button type="primary" text @click="handleCompanyDetail(item.company_id)">
                查看详情
              </n-button>
            </n-flex>
          </div>
        </n-card>

        <n-card
          v-for="item in searchJobs"
          :bordered="false"
          style="border-radius: 10px"
          class="mt-12"
        >
          <div class="flex">
            <n-flex vertical :size="1">
              <n-flex class="mt-5 text-20 font-600">
                <n-ellipsis style="max-width: 60%">
                  {{ item.title }}
                </n-ellipsis>
                <n-text class="ml-20 color-#ff6400">
                  {{ item.salary_min }}-{{ item.salary_max }}K
                </n-text>
              </n-flex>
              <n-flex>
                <n-tag
                  v-for="t in item.job_tags"
                  :bordered="false"
                  :color="{ color: '#f8f8f8', textColor: '#666', borderColor: '#fff' }"
                >
                  {{ t }}
                </n-tag>
              </n-flex>
              <n-flex class="text-12 mt-2" align="center">
                <n-avatar :src="item.company_icon" :size="22" />
                <span class="color-#07132B">
                  {{ item.company_name }}
                  |
                </span>
                <span class="color-#666">
                  {{ getIndustriesName(item.industry_code) }}
                </span>
                <span class="color-#666">
                  {{ getCompanySize(item.size) }}
                </span>
              </n-flex>
            </n-flex>
            <n-flex class="ml-auto" align="center">
              <n-button type="primary" text @click="handleJobDetail(item.job_id)">
                查看详情
              </n-button>
            </n-flex>
          </div>
        </n-card>
      </div>
      <div class="mt-60">
        <n-divider>没有更多结果了</n-divider>
      </div>
      <!-- 岗位推荐 -->
      <div class="mt-60">
        <div class="flex mb-10">
          <span class="m-auto text-32 font-600" style="color: #222">岗位推荐</span>
        </div>
        <n-flex justify="space-between" :size="[10, 20]">
          <n-card
            v-for="item in recommendationJobs"
            class="w-32%"
            style="border-radius: 10px"
            :bordered="false"
            :segmented="{
              footer: 'soft',
            }"
          >
            <a :href="'/job/' + item.job_id" target="_blank">
              <n-flex class="mt-5 text-18 color-primary">
                <n-ellipsis style="max-width: 60%">
                  {{ item.title }}
                </n-ellipsis>
                <n-text class="ml-auto color-#ff6400">
                  {{ item.salary_min }}-{{ item.salary_max }}K
                </n-text>
              </n-flex>
              <n-flex class="mt-5 text-12 color-#999">
                <n-text style="color: #999">
                  {{ getCity(item.address_code) }}
                </n-text>
                |
                <n-text style="color: #999">
                  {{ getJobName(item.job_code) }}
                </n-text>
              </n-flex>
              <n-flex class="mt-5">
                <n-tag
                  v-for="t in item.job_tags"
                  size="small"
                  :bordered="false"
                  :color="{ color: '#f8f8f8', textColor: '#8d92a1', borderColor: '#fff' }"
                >
                  {{ t }}
                </n-tag>
              </n-flex>
            </a>
            <template #footer>
              <a :href="'/company/' + item.company_id" target="_blank">
                <n-flex align="center">
                  <n-avatar :src="item.company_icon" />
                  <n-flex vertical :size="0">
                    <n-text>
                      {{ item.company_name }}
                    </n-text>
                    <n-flex class="text-12">
                      <n-text style="color: #999">
                        {{ getIndustriesName(item.industry_code) }}
                      </n-text>
                      <n-text style="color: #999">
                        {{ getCompanySize(item.size) }}
                      </n-text>
                    </n-flex>
                  </n-flex>
                </n-flex>
              </a>
            </template>
          </n-card>
        </n-flex>
      </div>
      <!-- 企业推荐 -->
      <div class="mt-36">
        <div class="flex mb-10">
          <span class="m-auto text-32 font-600" style="color: #222">企业推荐</span>
        </div>
        <n-flex justify="space-between" :size="[10, 20]">
          <n-card
            v-for="item in recommendationCompanies"
            class="w-32%"
            style="border-radius: 10px"
            :bordered="false"
            :segmented="{
              footer: 'soft',
            }"
          >
            <a :href="'/company/' + item.company_id" target="_blank">
              <n-flex align="center">
                <n-avatar :src="item.company_icon" :size="48" />
                <n-flex vertical :size="0">
                  <n-ellipsis class="text-18 color-primary">
                    {{ item.company_name }}
                  </n-ellipsis>
                  <n-flex class="text-12">
                    <n-text style="color: #999">
                      {{ getIndustriesName(item.industry_code) }}
                    </n-text>
                    <n-text style="color: #999">
                      {{ getCompanySize(item.size) }}
                    </n-text>
                  </n-flex>
                </n-flex>
              </n-flex>
            </a>
            <template #footer>
              <a v-for="jobsList in item.jobs" :href="'/job/' + jobsList.job_id" target="_blank">
                <n-flex class="mt-5 text-14">
                  <n-ellipsis style="max-width: 60%">
                    {{ jobsList.title }}
                  </n-ellipsis>
                  <n-text class="ml-auto color-#ff6400">
                    {{ jobsList.salary_min }}-{{ jobsList.salary_max }}K
                  </n-text>
                </n-flex>
                <n-flex class="mt-5 text-12 color-#999">
                  <n-text style="color: #999">
                    {{ getCity(jobsList.address_code) }}
                  </n-text>
                  |
                  <n-text style="color: #999">
                    {{ getJobName(jobsList.job_code) }}
                  </n-text>
                </n-flex>
              </a>
            </template>
          </n-card>
        </n-flex>
      </div>
    </div>
  </DefaultLayout>
</template>

<script setup>
import DefaultLayout from '@/layouts/default/index.vue'
import { jobs, getCity, getJobName, getIndustriesName, getCompanySize } from '@/data'
import { useSeekerStore } from '@/store'
import seekerApi from '@/api/seeker'
import { useRoute, useRouter } from 'vue-router'
const seekerStore = useSeekerStore()
const router = useRouter()
const route = useRoute()

const searchText = ref()

//搜索岗位列表
const searchJobs = ref([])
//搜索企业列表
const searchCompanies = ref([])

//推荐岗位列表
const recommendationJobs = ref([])
//推荐企业列表
const recommendationCompanies = ref([])

//获取推荐职位
async function getJobs() {
  if (seekerStore.seeker !== null) {
    let res = await seekerApi.getRecommendJobs(seekerStore.seeker.seeker_id,6)
    recommendationJobs.value = res.data
  } else {
    let res = await seekerApi.getCommonRecommendJobs(12)
    recommendationJobs.value = res.data
  }
}

//获取热门企业
async function getComapnies() {
  if (seekerStore.seeker !== null) {
    let res = await seekerApi.getRecommendCompanies(seekerStore.seeker.seeker_id,6)
    recommendationCompanies.value = res.data
  } else {
    let res = await seekerApi.getCommonRecommendCompanies(12)
    recommendationCompanies.value = res.data
  }
}

function handleCompanyDetail(company_id) {
  window.open('/company/' + company_id, '_blank')
}

function handleJobDetail(job_id) {
  window.open('/job/' + job_id, '_blank')
}

onMounted(async () => {
  //搜索的内容
  let key = route.query.key
  let job_code = route.query.job_code
  if (key !== undefined) {
    let res = await seekerApi.searchJobs(key)
    searchJobs.value = res.data
    res = await seekerApi.searchCompanies(key)
    searchCompanies.value = res.data
    searchText.value = key
  } else {
    let res = await seekerApi.searchCodeJobs(job_code)
    searchJobs.value = res.data
  }

  getJobs()
  getComapnies()
})

function search() {
  router.push('/search?key=' + searchText.value)
}
</script>
